<template>
    <div>
        <Row :gutter="12" :wrap="false">
            <Col flex="306px" class="ivu-mb">
                <costCenterTree
                    :classObject="classObject"
                    :className="className"
                    :type="type"
                    :modelType="modelType"
                    :data="costCenterData"
                    :addPanel="addPanel"
                    :editPanel="editPanel"
                    @handleSelectNode="handleSelectNode"
                    @handleAddSubmit="handleAddSubmit"
                    @handleEditSubmit="handleEditSubmit">
                </costCenterTree>
            </Col>
            <Col flex="1 1 auto" class="ivu-mb">
                <readCostContent
                    :data="currentNode.data"
                    @submit="handleEditSubmit">
                </readCostContent>
            </Col>
        </Row>
    </div>
</template>
<script>
    import readCostContent from './parts/readCostContent.vue';
    import { typeClassName } from '../../config/classNameMap';
    import costCenterTree from './parts/costCenterTree.vue';
    export default {
        name: 'costCenter',
        components: {costCenterTree,readCostContent },
        data () {
            return {
                addPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2
                },
                editPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                currentNode: {
                    id: 'root',
                    title: '未选中'
                },
                menuShow: true,
                classObject: null, // 成本中心实例
                className: typeClassName['costCenter'].className,
                type: typeClassName['costCenter'].type,
                modelType: typeClassName['costCenter'].modelType,
                rules: {
                    code: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ]
                },
            };
        },
        computed: {
            lang () {
                return {
                    'en-US': {
                        title:'cost manage',
                        currentSelect: 'current select'
                    },
                    'zh-CN': {
                        title:'成本中心管理',
                        currentSelect: '当前选中'
                    }
                }[this.G_Locale];
            },
            costCenterData () {
                let costCenterData = [];
                if (
                    !!this.classObject.record &&
                    !!this.classObject.record.hier &&
                    !!this.classObject.record.hier[0]
                ) {
                    costCenterData = this.classObject.record.hier[0].basic;
                }
                return costCenterData;
            }
        },
        beforeMount () {
            this.classObject = this.$modelObject.create(this.modelType);
            this.getMenuList();
        },
        methods: {
            // 获取部门数据
            getMenuList () {
                let filter = {
                    className: this.className,
                    type: this.type
                };
                let newFilter = '';
                if (this.tools.isReal(filter)) {
                    newFilter = this.classObject.util.getFilter(filter);
                }
                this.loading = true;
                this.classObject.query(newFilter).then((flag) => {
                    if (flag) {
                        this.loading = false;
                    } else {
                        this.loading = false;
                    }
                });
            },
            handleSelectNode (currentNode) {
                this.currentNode = currentNode;
            },
            // 新增成本中心
            handleAddSubmit (data) {
                let pointer = { className: this.className, type: this.type }
                let newData = {
                    ...data,
                    name: data.values.name,
                    id: this.tools.uuid(8),
                    model: typeClassName['costCenter'].modelType,
                    parentId: this.currentNode.id,
                    pointer: {}
                }
                // 添加hier中某项的接口
                this.loading = true;
                this.classObject
                    .runAddRegister(pointer, { basic: [newData] })
                    .then((flag) => {
                        if (flag) {
                            this.loading = false;
                            this.$set(this.addPanel.drawer, 'show', false);
                        } else {
                            this.loading = false;
                        }
                });
            },
            // 编辑成本中心
            handleEditSubmit (data) {
                let pointer = { type: this.type, className: this.className };
                // 更新hier中某项的接口
                this.loading = true;
                this.classObject.runRegister(pointer, { basic: [data] }).then((flag) => {
                    if (flag) {
                        let index = this.classObject.record.hier[0].basic.findIndex(
                            (d) => d.id === this.currentNode.id
                        );
                        if (index !== -1) {
                            this.classObject.record.hier[0].basic.splice(index, 1, data);
                        }
                        this.loading = false;
                        this.$set(this.editPanel.drawer, 'show', false);
                    } else {
                        this.loading = false;
                    }
                });
            },
        }
    };
</script>
<style lang="scss" scoped>
::v-deep .ivu-page-header-logo {
  font-size: 18px !important;
}
.ivu-row  {
    @media screen and (max-width: 600px) {
        .ivu-col:nth-of-type(1) {
            flex: 1!important;
        }
        .ivu-col:nth-of-type(2) {
            display: none;
        }
    }
}
</style>
